<template>
  <div class="bigbox">
    <div class="header">
      <span @click="goshangceng()"
        ><svg-icon iconClass="back" class="zhuo_back"></svg-icon
      ></span>
      <div>支付</div>
    </div>
    <div class="payprice">
      <b>￥{{ this.$route.query.value }}</b>
    </div>
    <div class="paypay">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <div class="wxzfyn">
            <van-icon name="wechat" color="green" size="30px" />
            <van-cell title="微信" clickable @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
          </div>
          <div class="wxzfyn">
            <van-icon name="alipay" color="blue" size="30px" />
            <van-cell title="支付宝" clickable @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </div>
          <div class="wxzfyn">
            <van-icon name="card" color="red" size="30px" />
            <van-cell title="银行卡" clickable @click="radio = '3'">
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell>
          </div>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="queding">
      <van-button type="info" @click="show = true">确定</van-button>
      <Aaa :showoff="show" :radio="radio" />
    </div>
  </div>
</template>

<script>
import Aaa from "../../components/dialog";
export default {
  name: "topayment",
  components: {
    Aaa,
  },
  data() {
    return {
      radio: "1",
      show: false,
    };
  },
  methods: {
    goshangceng() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  font-size: 18px;
}
.header {
  width: 100%;
  height: 60px;
  color: #ffffff;
  background-color: #555882;
  display: flex;
  line-height: 60px;
  div {
    margin: 0 auto;
    padding-right: 40px;
  }
  span {
    padding-left: 20px;
  }
}
.payprice {
  margin: 0 auto;
  margin-top: 50px;
  font-size: 28px;
}
.paypay {
  margin-top: 50px;
}
.wxzfyn {
  width: 100%;
  height: 60px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.queding {
  width: 300px;
  height: 45px;
  margin: 0 auto;
  margin-top: 30px;

  button {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #555882;
    border: none;
  }
}
</style>
